<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Html5 animation</title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script>
			var canvas ;
			var context;
			var canvasWidth;
			var canvasHeight;
			var playAnimation = false;
			
			var shape = function(x, y, width, height) {
				this.x = x;
				this.y = y;
				this.width = width;
				this.height = height;
				
				this.radius = Math.random()*100;
				this.angle = 0;
			}
			
			var shapes = new Array();
			
			$(document).ready(function(){
				canvas = $("#myCanvas");
				context = canvas.get(0).getContext("2d");
				
				canvasWidth = canvas.width();
				canvasHeight = canvas.height();
				
				var startButton = $("#startAnimation");
				var stopButton = $("#stopAnimation");
				
				stopButton.hide();
				startButton.click(function() {
					$(this).hide();
					stopButton.show();
					
					playAnimation = true;
					animate();
				});
				
				stopButton.click(function() {
					$(this).hide();
					startButton.show();
					
					playAnimation = false;
					animate();
				});
				
				for(var i=0; i<10; i++){
					var x = Math.random()*400;
					var y = Math.random()*400;
					var width = height = Math.random()*10+10;
					shapes.push(new shape(x, y, width, height));
				}
			});
			
			function animate(){
				moveBox();
				if(playAnimation){
					setTimeout(animate, 33);
				}
			}
			
			function moveBox(){
				context.clearRect(0, 0, canvasWidth, canvasHeight);
				
				var shapesLength = shapes.length;
				for(var i=0; i<shapesLength; i++){
					var tmpShape = shapes[i];
					tmpShape.angle += Math.random()* 10+5;
					if(tmpShape.angle >360){
						tmpShape.angle = 0;
					}
					var x = tmpShape.x + (tmpShape.radius * Math.cos(tmpShape.angle*(Math.PI/180)));
					var y = tmpShape.y + (tmpShape.radius * Math.sin(tmpShape.angle * Math.PI/180));
					context.fillRect(x, y, tmpShape.width, tmpShape.height);
				}
			}
			
			
			
			
		</script>
	</head>
	<body>
			<canvas id="myCanvas" style="border-style:solid" width="600" height="400">
			</canvas>
		<div>
			<button id="startAnimation"> Start </button>
			<button id="stopAnimation"> Stop </button>
		</div>
	</body>
</html>
